<!-- 主页面 -->
<template>
  <div>
    <h1>请选择身份</h1>
    <button @click="goToStudent">学生</button>
    <button @click="goToTeacher">教师</button>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  methods: {
    goToStudent() {
      this.$router.push('/student');
    },
    goToTeacher() {
      this.$router.push('/teacher');
    }
  }
};
</script>

<style scoped>
div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 890px;
  background-color:  #f5f5dc; 
  text-align: center;                                       /*居中*/
}

h1 {
  margin-bottom: 30px;
  color: #333;
  font-size: 2em;                                           /* 标题字体大小 */
}

button {
  padding: 10px 20px;
  margin: 5px 0;                                            /* 按钮之间的间距 */
  font-size: 1em;
  color: white;
  background-color: #333;                                 /* 与登录页面相同的按钮背景色 */
  border: none;
  border-radius: 8px;                                       /* 圆角边框 */
  transition: background-color 0.3s, transform 0.1s;        /* 背景色和按钮按压效果的过渡 */
  cursor: pointer;
}

button:hover {
  background-color: #555;                                 /* 鼠标悬停时的背景色 */
  transform: scale(1.05);                                   /* 轻微放大按钮 */
}

button:active {
  background-color: #222;                                 /* 按钮被按下时的背景色 */
  transform: scale(0.95);                                   /* 轻微缩小按钮，模拟按压效果 */
}
</style>